import { Box, Text, VerticalStack } from "@shopify/polaris";
import HighchartsReact from "highcharts-react-official";
import Highcharts from "highcharts"
import { useRef } from "react";

function IssuesGraph({ categoryIssues }) {

    const issuesGraphRef = useRef(null)

    let dataArr = [] ;
    Object.values(categoryIssues).forEach((issuesList)=>{
        dataArr.push(issuesList.length)
    })

    const issuesGraphOptions = {
        chart: {
            type: 'column',
            height: '280px',
            spacing: [5, 0, 0, 0],
        },
        credits: {
            enabled: false,
        },
        title: {
            text: '',
            align: 'left',
            margin: 20
        },
        xAxis: {
            categories: Object.keys(categoryIssues),
            crosshair: true,
            accessibility: {
                description: 'Categories'
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '# of issues'
            }
        },
        legend: {
            enabled: false
        },
        series: {
            minPointLength: 0,
            pointWidth: 40,
            color: "#FDA29B",
            cursor: 'pointer',
            data: dataArr
        }
    }

    return (
        <VerticalStack gap={3}>
            <Text variant="headingXs">Number of issues</Text>
            <Box>
                <HighchartsReact
                    highcharts={Highcharts}
                    options={issuesGraphOptions}
                    ref={issuesGraphRef}
                />
            </Box>
           
        </VerticalStack>
    )
}

export default IssuesGraph